<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    /* 固定侧边栏容器 */
    .fixed-sidebar {
        position: fixed;       /* 固定定位，相对于视口 */
        right: 0;             /* 右侧贴边 */
        width: 50px;
        top: 50%;             /* 垂直居中第一步：顶部距离视口50% */
        transform: translateY(-50%); /* 垂直居中第二步：向上移动自身50% */
        background-color: #4ecdc4; /* 背景色，可根据设计调整 */
        padding: 10px;
        border-radius: 8px 0 0 8px; /* 左侧圆角，贴合边缘 */
        z-index: 999;         /* 确保层级在其他内容之上 */
    }

    /* 单个菜单项样式（可选） */
    .sidebar-item {
        color: #fff;
        text-align: center;
        margin: 10px 0;
        cursor: pointer;
    }
    .header-banner{
        height: 770px;
        min-width: 1000px;
        background-image: url("image/header.jpg");
        background-size: cover; /* 铺满容器*/
        background-position: center; /* 居中显示*/
        background-repeat: no-repeat; /* 禁止重复平铺 */
        display: flex;
        flex-direction: column;
    }
    /* 调整图标与文字的布局 */
    .sidebar-item {
        display: flex;
        flex-direction: column; /* 图标在上，文字在下 */
        align-items: center;
        color: #fff;
        margin: 10px 0;
        cursor: pointer;
    }
    .sidebar-item span {
        font-size: 10px;
    }
    .sidebar-item img {
        width: 30px; /* 图标宽度，可自定义 */
        height: 30px;
        margin-bottom: 5px;
    }
    .header-nav{
        height: 100px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .header-nav nav a {
        color: white; /* 文字设为白色 */
        text-decoration: none; /* 可选：去除默认下划线 */
        margin: 0 10px; /* 可选：添加间距 */
    }
    /* 鼠标悬停时的样式（:hover 伪类） */
    .header-nav nav a:hover {
        color: #4ecdc4; /* 鼠标放上去变成黄色（可替换为任意颜色） */
        /* 可选：添加下划线或其他效果 */
    }
    .header-nav nav {
        margin-left: 200px;
    }
    .title {
        text-align: center;
        color:white;
        margin-top: 180px;
    }
    .title h1 {
        font-size: 50px;
        font-weight: normal;  
    }
    .title p {
        font-size: 20px;
    }

    .content-box1{
        height: 800px;
        min-width: 1000px;
        display: flex;
        flex-direction: column;
    }

    .content-box2{
        height: 500px;
        min-width: 1000px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #4ecdc4;
    }

    .content-box3{
        height: 750px;
        min-width: 1000px;
        display: flex;
        flex-direction: column;
    }

    .content-box3-main{
        height: 700px;
        min-width: 800px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .content-box3-form{
        height: 500px;
        min-width: 500px;
        display: flex;
        flex-direction: column;

    }

    .content-box3-infotext{
        height: 600px;
        min-width: 500px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .content-box4{
        height: 500px;
        min-width: 1000px;
        display: flex;
        flex-direction: column;
        background-color: #4ecdc4;
    }

    .content-box4-mian{
        height: 500px;
        min-width: 800px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .content-box4-text{
        height: 500px;
        min-width: 500px;
        color: white;
        display: flex;
        flex-direction: column;

    }

    .content-box4-infotext{
        height: 600px;
        min-width: 500px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .content-box5{
        height: 550px;
        min-width: 1000px;
        display: flex;
        flex-direction: column;
    }

    .content-box6{
        height: 400px;
        min-width: 1000px;
        display: flex;
        flex-direction: column;
        background-color: #4ecdc4;
    }

    .content-box7{
        height: 400px;
        min-width: 1000px;
        display: flex;
        flex-direction: column;
    }

    .content-box7-main{
        height: 200px;
        min-width: 1000px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .content-box7-main img{
        
        width: 200px;
        height: 100px;
    }

    .content-box8{
        height: 750px;
        min-width: 1000px;
        display: flex;
        flex-direction: column;
    }

    .content-box8-nav{
        height: 50px;
        min-width: 1000px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .content-box8-main{
        height: 600px;
        min-width: 1000px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .footer {
        background-color: #f5f5f5; /* 浅灰色背景，可选 */
        padding: 20px 0;
        text-align: center; /* 文字居中 */
        font-size: 14px;
        color: #666; /* 灰色文字，确保可读性 */
        border-top: 1px solid #eee; /* 顶部细边框，分隔内容区和页脚 */
    }

    .image-grid {
      display: flex;
      flex-wrap: wrap; /* 自动换行 */
      padding: 10px;
    }
    .image-grid img {
      width: calc(25% - 10px); /* 4列布局,每列宽度 = 25% - 间距 */
      height: auto; /* 保持图片比例 */
      object-fit: cover; /* 裁剪图片以填满容器（可选，避免变形） */
    }

    .tab-group {
        display: flex;
        gap: 10px;
        padding: 10px;
        align-items: center;
    }
    .tab {
        padding: 8px 20px;
        border-radius: 20px;
        background-color: #fff; /* 未选中：白底 */
        color: #333; /* 未选中：黑字 */
        cursor: pointer;
        border: 1px solid #ddd;
        font-size: 14px;
        outline: none; /* 取消默认聚焦边框，用自定义样式替代 */
    }
    /* 选中后（:focus）：青底白字（保持状态） */
    .tab:hover {
        background-color: #4ecdc4;
        color: #fff;
        border-color: #4ecdc4;
    }

    /* 单个卡片容器样式 */
    .newcard {
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
        display: inline-block; /* 多个卡片横向排列 */
        margin-top: 80px;
    }

    /* 卡片图标样式 */
    .card2-icon {
        width: 100px;
        height: 100px;
        background-color: #4ecdc4; /* 青绿色圆形背景 */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
    }
    .card2-icon img {
            width: 60px; /* 图标宽度（核心：控制大小） */
            height: 60px; /* 图标高度（与宽度一致，避免变形） */
            object-fit: contain; /* 保持图标比例，不拉伸 */
    }

    /* 卡片标题样式 */
    .card2-title {
        font-size: 50px;
        color: white;
        margin-bottom: 20px;
        font-weight: bold; /* 加粗字体，让数字更醒目 */
    }

    /* 卡片描述样式 */
    .card2-desc {
        font-size: 20px;
        color: white;
        line-height: 1.5;
    }

    .contact-info {
        font-family: "Microsoft YaHei", sans-serif;
        color: #333;
        line-height: 20px;
        margin: 20px;
        line-height: 2.2; /* 加大行高，数值越大间距越宽 */
    }
    .company-name {
        font-weight: bold;
        font-size: 18px;
        margin-top: 10px;
    }

    .clear-input {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        background-color: transparent; /* 背景完全透明，不遮挡背景图 */
        border: 1px solid rgba(70, 66, 66, 0.3); /* 半透明白色边框 */
        border-radius: 4px;
        outline: none;
    }

    .normal-input {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        background-color: white; /* 白色背景，与示例一致 */
        border: 1px solid #ddd; /* 浅灰色边框，增强视觉区分 */
        color: #666; /* 深灰色文字，确保可读性 */
        border-radius: 0; /* 取消圆角，示例为直角边框 */
        outline: none;
    }

    .business-unit {
        text-align: center; /* 文字居中 */
        margin-top: 100px;
        margin-bottom: 60px;
    }
    .business-unit .chinese {
        font-size: 24px;    /* 中文文字大小，可根据需求调整 */
        color: #333;        /* 中文文字颜色，示例为深灰色 */
        font-weight: normal;/* 中文文字字重，示例为常规 */
        margin-bottom: 8px; /* 与下方英文的间距 */
    }
    .business-unit .english {
        font-size: 32px;    /* 英文文字大小，可根据需求调整 */
        color: #4ecdc4;     /* 英文文字颜色，示例为青绿色 */
        font-weight: bold;  /* 英文文字字重，示例为加粗 */
        text-transform: uppercase; /* 英文全部大写（可选，若设计需要） */
        letter-spacing: 1px;/* 字母间距，增强视觉效果（可选） */
    }
    .business-unit .white-chinese {
        font-size: 24px;    /* 中文文字大小，可根据需求调整 */
        color: white;
        font-weight: normal;/* 中文文字字重，示例为常规 */
        margin-bottom: 8px; /* 与下方英文的间距 */
    }
    .business-unit .white-english {
        font-size: 32px;    /* 英文文字大小，可根据需求调整 */
        color: white;
        font-weight: bold;  /* 英文文字字重，示例为加粗 */
        text-transform: uppercase; /* 英文全部大写（可选，若设计需要） */
        letter-spacing: 1px;/* 字母间距，增强视觉效果（可选） */
    }
    .content-box5-main{
        height: 400px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0px;
        gap: 30px; /* 卡片之间的间距 */
    }

    .content-box6-main{
        height: 400px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 0px;
        gap: 30px; /* 卡片之间的间距 */
    }

    /* 单个卡片容器样式 */
    .card {
        text-align: center;
        padding: 20px;
        box-sizing: border-box;
        display: inline-block; /* 多个卡片横向排列 */
        margin: 0 20px;
    }

    /* 卡片图标样式 */
    .card-icon {
        width: 80px;
        height: 80px;
        background-color: #4ecdc4; /* 青绿色圆形背景 */
        border-radius: 50%; /* 圆形效果 */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
    }
    .card-icon img {
            width: 40px; /* 图标宽度（核心：控制大小） */
            height: 40px; /* 图标高度（与宽度一致，避免变形） */
            object-fit: contain; /* 保持图标比例，不拉伸 */
            /* 若图标不是白色，添加以下代码转为白色 */
            filter: invert(1); /* invert(1) = 反色，黑色图标会变成白色 */
    }

    /* 卡片标题样式 */
    .card-title {
        font-size: 20px;
        color: #333;
        margin-bottom: 10px;
    }

    /* 卡片描述样式 */
    .card-desc {
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }

    .card-container{
        height: 500px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0px;
        gap: 30px; /* 卡片之间的间距 */
    }
    /* 单个卡片样式：背景透明+边框+内边距 */
    .card1 {
        width: 300px; /* 卡片宽度，根据设计调整 */
        height: 500px; /* 卡片高度，根据设计调整 */ 
        background-color: rgba(255, 255, 255, 0.8); /* 白色半透明背景 */
        border: 1px solid rgba(255, 255, 255, 0.5); /* 浅色边框 */
        padding: 10px;
        box-sizing: border-box;
        background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
        url(image/member1.jpg) center/cover no-repeat;    /* 半透明白色遮罩 */
    }
    .card2 {
        width: 300px; /* 卡片宽度，根据设计调整 */
        height: 500px; /* 卡片高度，根据设计调整 */ 
        background-color: rgba(255, 255, 255, 0.8); /* 白色半透明背景 */
        border: 1px solid rgba(255, 255, 255, 0.5); /* 浅色边框 */
        padding: 10px;
        box-sizing: border-box;
        background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
        url(image/member2.jpg) center/cover no-repeat;    /* 半透明白色遮罩 */
    }
    .card3 {
        width: 300px; /* 卡片宽度，根据设计调整 */
        height: 500px; /* 卡片高度，根据设计调整 */ 
        background-color: rgba(255, 255, 255, 0.8); /* 白色半透明背景 */
        border: 1px solid rgba(255, 255, 255, 0.5); /* 浅色边框 */
        padding: 10px;
        box-sizing: border-box;
        background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
        url(image/member3.jpg) center/cover no-repeat;    /* 半透明白色遮罩 */
    }

    /* 卡片头部：文字分层（中文标题+英文说明） */
    .card-header {
        text-align: center;
        margin-top: 50px;
    }
    .card-header h3 {
        font-size: 24px;
        color: #333;
        margin-bottom: 10px;
        position: relative;
    }
    .card-header h3::after { /* 标题下方的横线 */
        content: "";
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 2px;
        background-color: #4ecdc4; /* 青绿色横线 */
    }
    .card-header p {
        font-size: 16px;
        color: #666;
        font-style: italic; /* 英文倾斜（可选） */
    }

    /* 数据统计区域：进度条样式 */
    .card-stats {
        margin-bottom: 20px;
    }
    .stat-item {
        margin-bottom: 15px;
    }
    /* 标题与百分比横向排列 */
    .stat-title {
        display: flex;
        justify-content: space-between; /* 标题居左，百分比居右 */
        align-items: center; /* 垂直居中对齐 */
        margin-bottom: 5px; /* 与下方进度条的间距 */
    }
    .stat-title span {
        font-size: 14px;
        color: #666;
    }
    .stat-item span {
        display: block;
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
    }
    .stat-title .percent {
        color: #666; /* 百分比用主题色突出 */
        font-weight: bold;
    }
    .stat-bar {
        height: 12px;
        background-color: #eee;
        border-radius: 6px;
        overflow: hidden;
    }
    .bar {
        height: 100%;
        background-color: #4ecdc4; /* 进度条填充色（青绿色） */
    }
    .stat-bar span {
        margin-left: 10px;
        font-size: 14px;
        color: #333;
        margin-bottom: 0;
    }

    /* 卡片描述文字 */
    .card-desc p {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
    }

    /* 响应式适配（可选）：小屏幕下卡片堆叠 */
    @media (max-width: 768px) {
    .card-container {
        flex-direction: column;
    }
    }

    /* 按钮整体样式 */
    .submit-btn {
        width: 120px;
        background-color: #4ecdc4; /* 青绿色背景，可根据需求调整 */
        color: #fff; /* 文字白色 */
        border: none; /* 取消默认边框 */
        border-radius: 20px; /* 圆角，数值越大越圆润 */
        padding: 10px 20px; /* 内边距，控制按钮大小 */
        font-size: 16px; /* 文字大小 */
        cursor: pointer; /* 鼠标悬浮时显示手型 */
        display: flex; /* 弹性布局，让图标和文字水平对齐 */
        align-items: center; /* 垂直居中 */
        justify-content: center;
        gap: 8px; /* 图标和文字之间的间距 */
    }

    /* 图标样式（可选：调整大小） */
    .plane-icon {
        width: 16px;
        height: 16px;
    }

    
</style>
<body>
    <div class="fixed-sidebar">
        <div class="sidebar-item">
            <img src="image/二维码.png" alt="下载APP图标">
            <span>下载APP</span>
        </div>
        <div class="sidebar-item">
            <img src="image/二维码.png" alt="下载APP图标">
            <span>下载小程序</span>
        </div>
        <div class="sidebar-item">
            <img src="image/短信.png" alt="业务咨询">
            <span>业务咨询</span>
        </div>
        <div class="sidebar-item">
            <img src="image/合作.png" alt="商务对接">
            <span>商务对接</span>
        </div>
        <div class="sidebar-item">
            <img src="image/客服.png" alt="在线客服">
            <span>在线客服</span>
        </div>
    </div>
    <div class="header-banner">
        <div class="header-nav">
            <div>
                <img src="image/logo3.png" alt="logo3">
            </div>
            <!-- 导航栏 -->
            <nav>
                <a href="#">主页</a>
                <a href="#">业务板块</a>
                <a href="#">业务流程</a>
                <a href="#">预约勘查</a>
                <a href="#">我们的优势</a>
                <a href="#">合作伙伴</a>
                <a href="#">我们的案例</a>
            </nav>
        </div>
        <!-- 标题区域 -->
        <div class="title">
            <h1>电电科技-电建网</h1>
            <p>打造电力行业新生态</p>
        </div>
    </div>
    <div class="content-box1">
        <div class="business-unit">
            <div class="chinese">业务板块</div>
            <div class="english">BUSINESS UNIT</div>
        </div>
        <div class="card-container">
  <!-- 电力工程卡片 -->
  <div class="card1">
    <div class="card-header">
      <h3>电力工程</h3>
      <p>electric power project</p>
    </div>
    <div class="card-stats">
      <div class="stat-item">
        <div class="stat-title">
            <span>行业占有率</span>
            <span class="percent">33%</span>
        </div>
        <div class="stat-bar">
          <div class="bar" style="width: 33%"></div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-title">
            <span>好评率</span>
            <span class="percent">94%</span>
        </div>
        <div class="stat-bar">
          <div class="bar" style="width: 94%"></div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-title">
            <span>行业占有率</span>
            <span class="percent">66%</span>
        </div>
        <div class="stat-bar">
            <div class="bar" style="width: 66%"></div>
        </div>
        </div>
    </div>
    <div class="card-desc">
      <p>所有需要用电的用户都是我们的客户。我们除了为客户完成施工任务外，还负责电力部门的手续办理、设计、验收等工作。我们的涉猎到学校、医院、市政、住宅、工业、农业、旅游等各行各业以及各种形式的存在的公司。</p>
    </div>
  </div>

  <!-- 光伏电站卡片 -->
  <div class="card2">
    <div class="card-header">
      <h3>光伏电站</h3>
      <p>photovoltaic power station</p>
    </div>
    <div class="card-stats">
      <div class="stat-item">
        <div class="stat-title">
            <span>行业占有率</span>
            <span class="percent">22%</span>
        </div>
        <div class="stat-bar">
          <div class="bar" style="width: 22%"></div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-title">
            <span>好评率</span>
            <span class="percent">96%</span>
        </div>
        <div class="stat-bar">
          <div class="bar" style="width: 96%"></div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-title">
            <span>行业占有率</span>
            <span class="percent">35%</span>
        </div>
        <div class="stat-bar">
            <div class="bar" style="width: 35%"></div>
        </div>
        </div>
    </div>
    <div class="card-desc">
      <p>2013 年开始，国家开始实施光伏发电国家补贴政策，补贴期限 20 年，此后国家各部门相继出台有力政策，支持光伏并网国家补贴与地方补贴同步进行。</p>
    </div>
  </div>

  <!-- 电锅炉改造卡片 -->
  <div class="card3">
    <div class="card-header">
      <h3>电锅炉改造</h3>
      <p>Electric boiler reforming</p>
    </div>
    <div class="card-stats">
      <div class="stat-item">
        <div class="stat-title">
            <span>行业占有率</span>
            <span class="percent">18%</span>
        </div>
        <div class="stat-bar">
          <div class="bar" style="width: 18%"></div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-title">
            <span>好评率</span>
            <span class="percent">91%</span>
        </div>
        <div class="stat-bar">
          <div class="bar" style="width: 91%"></div>
        </div>
      </div>
      <div class="stat-item">
        <div class="stat-title">
            <span>行业占有率</span>
            <span class="percent">33%</span>
        </div>
        <div class="stat-bar">
            <div class="bar" style="width: 33%"></div>
        </div>
        </div>
    </div>
    <div class="card-desc">
      <p>新能源具有储量丰富、可以循环使用、没有污染或很少污染等特点。新能源：又称非常规能源。是指传统能源之外的各种能源形式。指刚开始开发利用或正在积极研究、有待推广的能源，如太阳能、地热能、风能、海洋能、生物质能和核聚变能等。</p>
    </div>
  </div>
</div>
    </div>
    <div class="content-box2">
        <div class="business-unit">
            <div class="white-chinese">业务流程</div>
            <div class="white-english">BUSINESS PROCESS</div>
        </div>
        <div style="margin-top: 50px;">
            <img src="image/liucheng.png" alt="流程">
        </div>
    </div>
    <div class="content-box3">
        <div class="business-unit">
            <div class="chinese">预约勘查</div>
            <div class="english">MAKE AN APPOINTMENT TO SURVEY</div>
        </div>
        <div class="content-box3-main">
            <div class="content-box3-form">
                <input type="name" placeholder="您的名字" class="clear-input">
                <input type="email" placeholder="您的邮件" class="clear-input">
                <input type="phone" placeholder="您的电话" class="clear-input">
                <textarea placeholder="详细信息..." class="clear-input" style="height: 200px;"></textarea>
                <button class="submit-btn">
                    <img src="image/plane.png" alt="飞机图标" class="plane-icon">
                    提交
                </button>
            </div>
            <div class="content-box3-infotext">
                <div class="contact-info">
                    请留下您的联系方式，我们恭候您的光临...<br>
                    <div class="company-name">沈阳电电科技有限公司</div>
                    地址:中国(辽宁)自由贸易试验区沈阳片区全运路109-1号(109-1号)2层247-10604室<br>
                    邮箱:ddkefu@jtsc870614.com<br>
                    电话:400-611-0666
                </div>
            </div>
        </div>
    </div>
    <div class="content-box4">
        <div class="business-unit">
            <div class="white-chinese">光伏计算器</div>
            <div class="white-english">PHOTOVOLTAIC CALCULATOR</div>
        </div>
        <div class="content-box4-mian">
            <div class="content-box4-text">请输入您的光伏可安装面积我们会为您估算出您一年的收益。</div>
            <div class="content-box4-infotext">
                <input type="jisuan" placeholder="请输入您的房屋占地面积(平方米)" class="normal-input">
                <button class="submit-btn">开始计算</button>
            </div>
        </div>
    </div>
    <div class="content-box5">
        <div class="business-unit">
            <div class="chinese">我们的优势</div>
            <div class="english">OUR ADVANTAGES</div>
        </div>
        <div class="content-box5-main">
            <div class="card">
                <div class="card-icon">
                    <img src="image/齿轮-01.png" alt="1">
                </div>
            <h3 class="card-title">强大的电力平台</h3>
            <p class="card-desc">一站式服务，为您解决所有的电力之忧...</p>
            </div>
            <div class="card">
                <div class="card-icon">
                    <img src="image/凉亭.png" alt="2">
                </div>
            <h3 class="card-title">强大的人才库</h3>
            <p class="card-desc">为您解决安装、维护、统计等烦琐的工作...</p>
            </div>
            <div class="card">
                <div class="card-icon">
                    <img src="image/微信.png" alt="3">
                </div>
            <h3 class="card-title">高效率的团队</h3>
            <p class="card-desc">第一时间响应并解决你的问题...</p>
            </div>
            <div class="card">
                <div class="card-icon">
                    <img src="image/足球.png" alt="1">
                </div>
            <h3 class="card-title">全新的商业模式</h3>
            <p class="card-desc">线上线下让您体验优质的电力服务...</p>
            </div>
        </div>
    </div>
    <div class="content-box6">
        <div class="content-box6-main">
            <div class="newcard">
                <div class="card2-icon">
                    <img src="image/箱子.png" alt="1">
                </div>
            <h3 class="card2-title">0+</h3>
            <p class="card2-desc">累计工程项目</p>
            </div>
            <div class="newcard">
                <div class="card2-icon">
                    <img src="image/时钟.png" alt="2">
                </div>
            <h3 class="card2-title">0+</h3>
            <p class="card2-desc">累计解决时间(小时)</p>
            </div>
            <div class="newcard">
                <div class="card2-icon">
                    <img src="image/plane.png" alt="3">
                </div>
            <h3 class="card2-title">0+</h3>
            <p class="card2-desc">累计解决问题</p>
            </div>
            <div class="newcard">
                <div class="card2-icon">
                    <img src="image/line-magic（魔法棒）.png" alt="3">
                </div>
            <h3 class="card2-title">0%</h3>
            <p class="card2-desc">客户满意度</p>
            </div>
        </div>
    </div>
    <div class="content-box7">
        <div class="business-unit">
            <div class="chinese">合作伙伴</div>
            <div class="english">COOPERATIVE PARTNER</div>
        </div>
        <div class="content-box7-main">
            <img src="image/hz2.jpg" alt="1">
            <img src="image/hz7.jpg" alt="2">
            <img src="image/hz8.jpg" alt="3">
            <img src="image/hz3.jpg" alt="4">
            <img src="image/hz4.jpg" alt="5">
        </div>
    </div>
    <div class="content-box8">
        <div class="business-unit">
            <div class="chinese">我们的案例</div>
            <div class="english">OUR PRODUCTS</div>
        </div>
        <div class="content-box8-nav">
            <div class="tab-group">
                <button class="tab">全部</button>
                <button class="tab">电力工程</button>
                <button class="tab">光伏电站</button>
                <button class="tab">电锅炉改造</button>
            </div>
        </div>
        <div class="content-box8-main">
            <div class="image-grid">
                <img src="image/dl1.jpg" alt="1">
                <img src="image/dl2.jpg" alt="2">
                <img src="image/dl3.jpg" alt="3">
                <img src="image/dl4.jpg" alt="4">
                <img src="image/dl5.jpg" alt="5">
                <img src="image/dl6.jpg" alt="6">
                <img src="image/dl7.jpg" alt="7">
                <img src="image/dl8.jpg" alt="8">
                <img src="image/gf1.jpg" alt="9">
                <img src="image/gf2.jpg" alt="10">
                <img src="image/gl1.jpg" alt="11">
            </div>
        </div>
        <footer class="footer">
            <p class="footer-copyright">© 2017 所有权 沈阳电电科技有限公司</p>
        </footer>
    </div>
</body>
</html>